<template>
  <div>
    <div>
      <label>Title:</label>
      <input v-model="localConfig.title" @input="emitChange" />
    </div>
    <div>
      <label>Description:</label>
      <input v-model="localConfig.description" @input="emitChange" />
    </div>
    <div>
      <label>Tags:</label>
      <input v-model="localConfig.tags" @input="emitChange" />
    </div>
    <div>
      <label>Created At:</label>
      <input v-model="localConfig.createdAt" @input="emitChange" />
    </div>
    <div>
      <label>Updated At:</label>
      <input v-model="localConfig.updatedAt" @input="emitChange" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'KnowledgeNodeCard',
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      localConfig: { ...this.config }
    }
  },
  watch: {
    config: {
      handler(newVal) {
        this.localConfig = { ...newVal }
      },
      deep: true
    }
  },
  methods: {
    emitChange() {
      this.$emit('change', { ...this.localConfig })
    }
  }
};
</script> 